<template>
  <div class="admin-layout">
    <a-layout style="min-height: 100vh">
      <!-- 头部 -->
      <a-layout-header class="admin-header">
        <div class="header-content">
          <div class="logo">
            <router-link to="/">
              <h1>论坛管理系统</h1>
            </router-link>
          </div>
          <div class="header-right">
            <a-dropdown>
              <a-button type="link">
                <user-outlined />
                管理员
                <down-outlined />
              </a-button>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="profile">
                    <router-link to="/profile">个人中心</router-link>
                  </a-menu-item>
                  <a-menu-item key="logout" @click="handleLogout">
                    退出登录
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </a-layout-header>

      <a-layout>
        <!-- 侧边栏 -->
        <a-layout-sider width="240" theme="light" class="admin-sider">
          <a-menu
            mode="inline"
            :selectedKeys="selectedKeys"
            theme="light"
            class="admin-menu"
          >
            <a-menu-item key="dashboard">
              <template #icon><dashboard-outlined /></template>
              <router-link to="/admin/dashboard">控制台</router-link>
            </a-menu-item>
            <a-menu-item key="post-audit">
              <template #icon><audit-outlined /></template>
              <router-link to="/admin/post-audit">帖子审核</router-link>
            </a-menu-item>
            <a-menu-item key="user-manage">
              <template #icon><team-outlined /></template>
              <router-link to="/admin/user-manage">用户管理</router-link>
            </a-menu-item>
            <a-menu-item key="system-settings">
              <template #icon><setting-outlined /></template>
              <router-link to="/admin/system-settings">系统设置</router-link>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>

        <!-- 内容区 -->
        <a-layout-content class="admin-content">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import {
  UserOutlined,
  DownOutlined,
  DashboardOutlined,
  AuditOutlined,
  TeamOutlined,
  SettingOutlined
} from '@ant-design/icons-vue';

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

// 当前选中的菜单项
const selectedKeys = computed(() => {
  const routeName = route.name;
  if (typeof routeName === 'string') {
    return [routeName];
  }
  return [];
});

// 登出处理
const handleLogout = async () => {
  await userStore.logout();
  router.push('/login');
};
</script>

<style scoped>
.admin-layout {
  background-color: #f0f2f5;
}

.admin-header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 10;
  padding: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.logo h1 {
  margin: 0;
  font-size: 18px;
  color: #1890ff;
  background: linear-gradient(45deg, #1890ff, #40a9ff);
  -webkit-background-clip: text;
  color: transparent;
}

.logo a {
  text-decoration: none;
}

.admin-sider {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: 9;
}

.admin-menu {
  border-right: none;
}

.admin-content {
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}

:deep(.ant-menu-item) {
  a {
    color: inherit;
    text-decoration: none;
  }

  &.ant-menu-item-selected {
    background: #e6f7ff;
    color: #1890ff;
    font-weight: 500;
    border-right: 3px solid #1890ff;

    a {
      color: #1890ff;
    }
  }
}
</style> 